<script setup lang="ts">
import { reactive, inject } from 'vue';
import { myStore } from '@/store/my'
import { resumeSkill } from '@/api/my';
import { Toast } from 'vant';

const { closeChange } = inject('popup') as any

const store = myStore()

const state = reactive({
    value: '',
    show: false,
    skillList: <any>[],
    sysSkill: <any>[]
})

const setInfo = () => {
    if (store.resumeInfo.sys_skill_ids) {
        var arr = []
        var skill = store.resumeInfo.sys_skill_ids.split(',')
        for (var i = 0; i < store.sysSkillList.length; i++) {
            var flag = false
            for (var j = 0; j < skill.length; j++) {
                if (skill[j] === store.sysSkillList[i].title) {
                    flag = true
                    break;
                }
            }
            arr.push({
                title: store.sysSkillList[i].title,
                active: flag
            })
        }
        state.sysSkill = arr
    }
    if (store.resumeInfo.skill_ids) {
        var arr = []
        var skill = store.resumeInfo.skill_ids.split(',')
        for (var i = 0; i < skill.length; i++) {
            arr.push({
                title: skill[i],
                active: true
            })
        }
        state.skillList = arr
    }
}

if (store.sysSkillList.length === 0) {
    (async function () {
        await store.getLabelsSkill()
        setInfo()
    })()
} else {
    setInfo()
}

// 自定义标签确认 
const skillChange = () => {
    state.skillList.push({
        title: state.value,
        active: false
    })
    state.value = ''
    state.show = false
}

// 自定义+图标清除按钮
const clearSkill = (index: number) => {
    state.skillList.splice(index, 1)
}

// 自定义图标选中
const setSkill = (index: number) => {
    state.skillList[index].active = !state.skillList[index].active
}

// 系统图标选中
const setSysSkill = (index: number) => {
    state.sysSkill[index].active = !state.sysSkill[index].active
}

// 保存
const submit = async () => {
    let arr: any = []
    for (let i = 0; i < state.skillList.length; i++) {
        if (state.skillList[i].active) {
            arr.push(state.skillList[i].title)
        }
    }
    let sysArr: any = []
    for (let j = 0; j < state.sysSkill.length; j++) {
        if (state.sysSkill[j].active) {
            sysArr.push(state.sysSkill[j].title)
        }
    }

    if (sysArr.length === 0) {
        Toast('请选择一项非自定义技能')
        return
    }

    const res = await resumeSkill({
        "skill_ids": String(arr),
        "sys_skill_ids": String(sysArr)
    })
    if (res) {
        Toast('保存成功')
        closeChange()
    } else {
        Toast('保存失败')
    }
}
</script>

<template>
    <van-nav-bar title="技能关键词" left-arrow @click-left="closeChange" />
    <dl class="skill-list">
        <dt @click="setSysSkill(index)" :class="item.active ? 'active' : ''" v-for="(item, index) in state.sysSkill"
            :key="index">{{ item.title }}</dt>
        <dt @click="setSkill(index)" :class="item.active ? 'active' : ''" v-for="(item, index) in state.skillList"
            :key="index">{{ item.title }}
            <van-icon @click.stop="clearSkill(index)" name="close"></van-icon>
        </dt>
        <dt @click="state.show = true">自定义+</dt>
    </dl>
    <van-dialog v-model:show="state.show" title="自定义标签" show-cancel-button @confirm="skillChange"
        @cancel="state.show = false">
        <van-field class="skill-field" v-model="state.value" label="" placeholder="请输入标签" maxlength="10" />
    </van-dialog>
    <button class="wy-submit" @click="submit">保存</button>
</template>

<style scoped>
.skill-field {
    margin: 0 1rem;
}

.skill-list {
    padding: 1.31rem 1.09rem;
}

.skill-list dt {
    min-width: 4.5rem;
    height: 1.17rem;
    line-height: 1.17rem;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 0.27rem;
    font-size: 0.64rem;
    font-weight: 400;
    color: #333333;
    text-align: center;
    display: inline-block;
    margin: 0 0.64rem 0.8rem 0;
}

.skill-list dt.active {
    border: 1px solid #FF8E00;
    color: #FF8E00;
}

.skill-list dt i {
    margin-left: 0.2rem;
}
</style>